<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column h2")
            div(class="flex-column-item")
            div(class="flex-column-item center")
                span(v-if="infusionDoing") 大剂量输注中...
                span(v-else) 按ACT输注
            div(class="flex-column-item center")
                span(v-if="!infusionDoing") 按ESC返回
                span(v-else) {{amountDone}}
            div(class="flex-column-item")
</template>

<script>

    export default {
        data() {
            return {
                infusionDoing: false,
                interval: null,
                amountDone: 0, // 已输注量
            }
        },
        beforeDestroy() {
            clearInterval(this.interval);
            console.log(this.interval);
        },
        methods: {
            up() {
            },
            down() {
            },

            yes() {
                const amount =parseFloat(this.$route.query.amount);
                // 添加纪录
                window.dose.records.push({
                    amount: amount,
                    date: new Date(),
                    type: null
                });

                this.infusionDoing = true;
                const vm = this;
                this.interval = setInterval(function () {

                    const temp = (vm.amountDone * 10 + 0.5 * 10) / 10;
                    if (temp >= amount) {
                        vm.amountDone = amount;
                        vm.$router.push('/');
                    } else {
                        vm.amountDone = temp;
                    }

                }, 500);

            },
            back() {
                this.$router.push('common');
            }
        }
    }
</script>

<style>

</style>
